<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>component</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="myApp">
  <ol>
    <game1-item v-for="item in games" v-bind:game1="item"></game1-item>
  </ol>
</div>
<script>
/* 组件定义：game-item */
Vue.component('game1-item', {
  props: ['game1'],
  template: '<li>{{ game1.title }}</li>'
});
/* Vue对象实例化 */
var myApp = new Vue({
  el: '#myApp',
  data: {
    games: [
      { title: '斗地主' },
      { title: '打麻雀' },
      { title: 'UNO' }
    ]
  }
});
</script>
</body>
</html>